<template>
  <div id="KnowledgeApprovalList">
    <div class="timelineBox">
      <el-timeline :reverse="true" style="margin-top: 10px">
        <el-timeline-item v-for="(activity, index) in approvalList" :type="getTimeLineType(activity)" :key="index" :timestamp="activity.submitTime" placement="top"
          :icon="getTimeLineIcon(activity)"><!-- 属性控制是否空心 :hollow="activity.completed" -->
          <el-card style="margin: 0 10px;">
            <p>{{ getApprovalStatusDesc(activity) }}</p>
            <p>{{ '提交人:' + activity.submitterName }}</p>
            <p>{{ '审核人:' + activity.approvalorName }}</p>
            <el-link icon="view" type="primary" style="margin-left: 10px" @click="showDrawer(activity)">查看修改内容</el-link>
          </el-card>
        </el-timeline-item>
      </el-timeline>

      <el-drawer v-model="drawer" title="修改记录" direction="rtl" size="50%">
        <div v-html="sltApproval.tempContent"></div>
      </el-drawer>
    </div>

  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import moment from 'moment';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示
import { isEmpty } from 'lodash';
defineExpose({ initPage });
let contentId = null;
let approvalList: any = reactive([]); //质控规则列表表格
let drawer = ref(false);
let sltApproval = ref({});
function initPage(row: any) {
  contentId = row;
  findApprovalListByContentId();
}

function findApprovalListByContentId() {
  approvalList.length = 0;
  const url = '/api/wk/wkKnowledgeApproval/findApprovalListByContentId';

  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { contentId: contentId } })
    .then((res: any) => {
      approvalList.push(...res.data);
    })
    .catch((err: any) => {
      VxeMessage('获取数据异常', VxeNotifyType.error);
    });
}

function showDrawer(item:any) {
  sltApproval.value = item;
  drawer.value = true;
}

function getApprovalStatusDesc(item) {
  let returnDes = '';
  if (item.status == 0) {
    returnDes = '未审批';
  } else if (item.status == 5) {
    returnDes = '审批未通过';
  } else if (item.status == 10) {
    returnDes = '审批通过';
  }

  return returnDes;
}

function getTimeLineType(item: any) {
  const status = item.status;
  let typeDesc = 'info';
  if (status == 0) {
    typeDesc = 'primary';
  } else if (status == 5) {
    typeDesc = 'danger';
  } else if (status == 10) {
    typeDesc = 'success';
  }
  return typeDesc;
}

function getTimeLineIcon(item: any) {
  const status = item.status;
  let typeDesc = '';
  if (status == 0) {
    typeDesc = 'promotion';
  } else if (status == 5) {
    typeDesc = 'close';
  } else if (status == 10) {
    typeDesc = 'check';
  }
  return typeDesc;
}
</script>

<style lang="scss" scoped>
#KnowledgeApprovalList {
  height: 100%;
  .el-card {
    height: 100%;
    :deep(.el-card__body) {
      padding: 15px !important;
      height: calc(100% - 30px) !important;
    }
  }
}
</style>